<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作Dom</title>
</head>
<style>

</style>
<body>
    <div>
      <h2>我是标题标签</h2>
      <a href="#" class="text">我是超链接</a>
      <p>我是段落标签</p>
    </div>
</body>
<script>

  var div = document.getElementsByTagName("div")[0];
  function elemChidren(node){
    var arr = [],
    children = node.childNodes;
    for(let i = 0; i < children.length; i++){
      var childItem = children[i];
      if(childItem.nodeType === 1){
        arr.push(childItem);
      }
    }
    return arr;
  }
  // console.log(div);
  /** 作业
   *在原型上编程
   *遍历任意一个父元素找到他的子元素节点
   *有数字参数 -> 摸一个对应子元素
   *没有数字参数 -> 子元素节点的集合
   *  
   *在原型上编程
   *找到一个元素的第N层父级元素
   *
  */
 
  Element.prototype.set = function(num){
    if(num === undefined){
      return this.childNodes;
    }else{
      var arr = [],
          childern = this.childNodes;
      for(let i = 0; i < childern.length; i++){
        if(childern[i].nodeType === 1){
          arr.push(childern[i])
        }
      }
      return arr[num - 1];
    }
  }
  /**
   * 改良版
   * */ 
  Element.prototype.set_2 = function(num){
    var arr = {
      "length": 0,
      "push": Array.prototype.push,
      "splice": Array.prototype.splice,
    };
    var temp = this.childNodes;
    for(let i = 0; i < temp.length; i++){
      if(temp[i].nodeType === 1){
        arr.push(temp[i]);
      }
    }
    if(num !== undefined && typeof(num) !== "number"){
      return undefined;
    }
    // if(num === undefined){
    //   return arr;
    // }else{
    //   return arr[num];
    // }
    return num === undefined ? arr : arr[num];
  }
  var a = document.querySelector("div");
  console.log(a.set());



  Element.prototype.see = function(num){
    if(num === undefined || isNaN(parseInt(num))){
      return this.parentNode;
    }else{
      var storage = this.parentNode;
      for(var i = 1; i < parseInt(num); i++){
        storage = storage.parentNode;
      }
      return storage.nodeName === "HTML" ? null : storage;
    }
  }
  var b = document.querySelector("p");
  console.log(b.see(2));

  /**
   * 
   * 实现一个方法输入正数 就获取到下面的元素节点
   * 输入负数 就获取到上面的元素节点
   * */ 
  Element.prototype.elemSibling = function(num){
    var item = this;
    while(num){
      if(num < 0){
        if(item.previousElementSibling){
          item = item.previousElementSibling;
        }else{
          /*考虑兼容性的问题previousElementsibling 新版本的浏览器才支持
           * 老的的用previousSibling(前一个兄弟元素)
          */ 
          for(item = item.previousSibling; item && item.nodeType !== 1; 
              item.previousSibling);
        }
        num++;
      }else if(num > 0){
        if(item.nextElementSibling){
          item = item.nextElementSibling;
        }else{
          for(item = item.nextSibling; item && item.nodeType !== 1; item.nextSibling);
        }
        num--;
      }
    }
    return item;
  }
  var href = document.querySelector("a");
  console.log(href.elemSibling(1));
  
  

  

</script>
</html>